<template>
  <div>
    <!-- 搜索框 -->
    <search></search>

    <div class="fen1">
    <!-- 左侧导航栏 -->
    <van-sidebar v-model="activeKey">
    <van-sidebar-item :title="item.name" v-for="item in category" :key="item.id" :id="item.id" @click="getid(item.id)"/>
    </van-sidebar>
     <ul>
         <!-- 右上方图片 -->
        <div>
          <img :src="banner_url" height="140px" width="95%" />
          <h5>{{ front_desc }}</h5>
        </div>

        <!-- 居家分类 -->
        <div class="mytitle">
          <span></span>
          <h3>{{ name }}</h3>
        </div>

        <!-- 列表 -->
        <van-grid :column-num="3" :border='false'>
          <van-grid-item v-for="item in subCategoryList" :key="item.id" :icon="item.wap_banner_url" :text="item.name" />
          </van-grid>
      </ul>
      </div>
    <!-- 底部导航 -->
    <tabbar></tabbar>
  </div>
</template>

<script>
// 引入接口
import{getcategory}from '../api/category.js'
import{getcurrentcategory}from '../api/category.js'
// 引入底部导航
import tabbar from '../components/Tabbar.vue'
// 引入搜索框
import search from '@/components/categorypage/search.vue'
  export default {
    name:'',
    data () {
     return {
        category:'',//左侧导航数据
        activeKey:"",
        subCategoryList:[],//右下列表
        banner_url:'',//右侧图片
        front_desc:"", //回家，放松身心这类的话
        name:'' // 家居 
      };
    },
 components:{
   tabbar,
   search,
 },
  created(){
     getcategory().then(res=>{
       this.category=res.data.categoryList  
     })
     this.getid("1005000")
  },
  methods:{
    // 点击获取右侧数据
       getid(id){
       getcurrentcategory({id}).then(res=>{
         console.log(res);
         this.subCategoryList=res.data.currentCategory.subCategoryList
         this.front_desc=res.data.currentCategory.front_desc
         this.name=res.data.currentCategory.name
         this.banner_url=res.data.currentCategory.banner_url
       })
    },
    
  }
  }

</script>
<style scoped lang='less'>
.fen1{
  display: flex;
}
ul {
    width: 80%;
    div {
      width: 100%;
      position: relative;
      img {
        margin: 0 7px;
        border-radius: 5px;
        box-shadow: 0 0 6px #000;
        filter: brightness(0.5);
      }
      h5 {
        width: 100%;
        color: #fff;
        position: absolute;
        top: 48%;
        left: 0%;
        z-index: 222;
        text-align: center;
      }
    }
    .mytitle {
      width: 100%;
      height: 50px;
      position: relative;
      background: #fff;
      font-size: 16px;
      span {
        width: 50%;
        height: 2px;
        background-color: #ccc;
        position: absolute;
        margin: auto;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
      }
      h3 {
        width: 30%;
        height: 40px;
        background-color: #fff;
        position: absolute;
        margin: auto;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        line-height: 40px;
        text-align: center;
        color: #000;
      }
    }
  }
</style>